<template>
  <div class="sign_in_subscribe">
    <c-title text="预约"></c-title>
    <van-swipe
      class="my-swipe"
      indicator-color="white"
       :autoplay="3000"
      v-if="carousel_imgs_url.length>=1"
    >
      <van-swipe-item
        @click="skip('carousel_h5_link')"
        v-for="(item,index) in carousel_imgs_url"
        :key="index"
        style="height: 100%;"
      >
        <img :src="item" style="width: 100%;" /></van-swipe-item>
    </van-swipe>

    <ul class="nav">
      <li class="nav-item" @click="clickHome">
        <img src="../../../assets/images/sign_in_subscribe/sign_in_subscribe_shop.png" />
        <span style="margin-top: 0.5rem;">商城</span>
      </li>
      <!-- <li class="nav-item" @click="link('sign_in_subscribe_roll_out')">
        <img src="../../../assets/images/sign_in_subscribe/sign_in_subscribe_roll_out.png" alt />
        <span style="margin-top: .5rem;">转出</span>
      </li> -->
      <li class="nav-item" @click="link('sign_in_subscribe_shift_card')">
        <img src="../../../assets/images/sign_in_subscribe/sign_in_subscribe_shift_card.png" alt />
        <span style="margin-top: 0.5rem;">转证</span>
      </li>
      <li class="nav-item" @click="link('sign_in_subscribe_invite')">
        <img src="../../../assets/images/sign_in_subscribe/sign_in_subscribe_code.png" alt />
        <span style="margin-top: 0.5rem;">邀请码</span>
      </li>
      <li class="nav-item" @click="show1 = true">
        <img src="../../../assets/images/sign_in_subscribe/sign_in_subsctibe_chat.png" alt />
        <span style="margin-top: 0.5rem;">在线客服</span>
      </li>
    </ul>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="banner_thumb_url">
      <van-swipe-item @click="skip">
         <img :src="banner_thumb_url" style="width: 100%;" />
      </van-swipe-item>
    </van-swipe>

    <div class="yesterday_price" v-if="false">
      <!-- 需要对接第三方的没给接口不做，隐藏不显示先 -->
      <div class="flex align-center">
        <img
          class="message"
          src="../../../assets/images/sign_in_subscribe/sign_in_subscribe_message.png"
        />
        <span>昨日收盘价(RMB-STT)</span>
      </div>
      <div class="price">{{ $i18n.t('money') }}2.227</div>
    </div>

    <subscribe-component :listData="activity_list" @dialog_sign="dialog_sign" @finish="finish" />

    <van-popup v-model="show1" position="center">
      <div class="pop-content">
        <div class="pop-top">
          <div class="left" v-if="!fun.isTextEmpty(cservice)">
            <div class="wrap">
              <a :href="cservice">
                <div class="image">
                  <img src="../../../assets/images/kf_online_contect@2x.png" />
                </div>
              </a>
              <div>在线联系</div>
            </div>
          </div>
          <div
            style="display: flex; align-items: center;"
            v-if="!fun.isTextEmpty(cservice) && !fun.isTextEmpty(service_mobile)"
          >
            <div class="line"></div>
          </div>
          <div class="right" v-if="!fun.isTextEmpty(service_mobile)">
            <div class="wrap">
              <div class="image">
                <a :href="`tel:${service_mobile}`">
                  <img src="../../../assets/images/kf_tel_contect@2x.png" />
                </a>
              </div>

              <div>{{ service_mobile }}</div>
            </div>
          </div>
        </div>
        <div class="pop-bottom" v-if="!fun.isTextEmpty(service_QRcode)">
          <div class="image">
            <img :src="service_QRcode" style="width: 100%; height: 100%;" />
          </div>
        </div>
        <i class="iconfont icon-close11" @click="show1 = false"></i>
      </div>
    </van-popup>

    <div class="dialog" v-if="show_dialog">
      <p class="title">{{subscribe_title}}</p>
      <div class="radio-group" v-if="is_admin">
        <div v-for="(item, i) in sex" :key="item" class="radio-group">
          <span
            class="radio"
            :class="index == i ? 'select' : ''"
            @click="choose(i, item=='会员'?'member':'admin')"
          >&nbsp;</span>
          <span class="m-l-5">
            {{
            item
            }}
          </span>
        </div>
      </div>
      <div class="box">
          <input v-model="count" type="number" :placeholder="`预约数量：${datas.min_limit}-${datas.max_limit}`" :mix="datas.min_limit" :max="datas.max_limit" />
        <p style="font-size: 0.75rem; text-align: left;">当前{{active_value_name}}：{{active_value}}</p>
      </div>
      <div class="btn-group">
        <van-button color="#D1D1D1" size="small" @click="show_dialog = false">取消</van-button>
        <van-button color="#EF3532" size="small" @click="confirm('subscribe')">确认</van-button>
      </div>
    </div>

    <div class="password-dialog" v-if="show_pay">
      <div class="title">
        请输入密码
        <div class="close" @click="show_pay = false"></div>
      </div>
      <div class="radio-group m-b-1">
        <div v-for="(item, i) in type" :key="item" class="radio-group">
          <span
            class="radio"
            :class="pay_index == i ? 'select' : ''"
            @click="choose(i, 'pay')"
          >&nbsp;</span>
          <span class="m-l-5">
            {{
            item
            }}
          </span>
        </div>
      </div>
      <div class="box">
        <input
          v-model="password"
          type="password"
          :placeholder="pay_index == 0 ? '请输入登录密码' : '请输入支付密码'"
        />
      </div>
      <div class="btn-group-pay">
        <van-button color="#D1D1D1" size="small" @click="show_pay = false">取消</van-button>
        <van-button color="#EF3532" size="small" @click="confirm('pay')">确认</van-button>
      </div>
    </div>
    <van-overlay :show="password_show" @click="password_show = false">
        <div class="wrapper" @click.stop>
          <div class="block" >
            <div class="flex">
              <span class="flex-1">提示</span>
              <van-icon name="cross" @click="password_show=false" />
            </div>
            <div class="error-password">支付密码输入错误</div>
            <div class="group-btn">
            <van-button size="small" style="border-radius: 0.3rem;" @click="password_handle('forget')">忘记密码</van-button>
            <van-button size="small" style="border-radius: 0.3rem;" type="danger" @click="password_handle('input')">重新输入</van-button>
            </div>
          </div>
        </div>
      </van-overlay>
  </div>
</template>

<script>
import home_controller from "./home_controller.js";
export default home_controller;
</script>

<style lang="scss" scoped>
.sign_in_subscribe {
  .group-btn {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 1rem;
  }

  .error-password {
    margin: 2rem 0;
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .flex-1 {
    flex: 1;
  }

  .block {
    width: 17.75rem;
    background-color: #fff;
    border-radius: 0.625rem;
    padding: 0.6rem 0.625rem;
  }

  .pop-content {
    width: 16rem;
    padding: 3.1875rem 0;
    text-align: center;
    border-radius: 1.1875rem;
    background: #fff;

    .pop-top {
      display: flex;
      align-items: unset;
      justify-content: center;

      .left {
        width: 50%;
        display: flex;
        justify-content: center;

        .wrap {
          display: flex;
          flex-direction: column;
          align-items: center;

          .image {
            width: 2.625rem;
            height: 2.625rem;
            margin-bottom: 0.5rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .line {
        width: 1px;
        height: 1.625rem;
        background-color: #999;
      }

      .right {
        width: 50%;
        display: flex;
        justify-content: center;

        .wrap {
          display: flex;
          flex-direction: column;
          align-items: center;

          .image {
            width: 2.625rem;
            height: 2.625rem;
            margin-bottom: 0.5rem;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .pop-bottom {
      margin-top: 1rem;
      width: 100%;
      display: flex;
      justify-content: center;

      .image {
        width: 50%;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .icon-close11 {
      position: absolute;
      right: 1rem;
      top: 1rem;
      font-size: 18px;
    }
  }

  padding: 0 0.5rem 3.375rem;

  .message {
    width: 0.7813rem;
    margin-right: 0.4688rem;
  }

  .m-l-5 {
    margin-left: 5px;
  }

  .m-b-1 {
    margin-bottom: 1rem;
  }

  .radio-group {
    display: flex;
    padding-left: 0.325rem;
    margin-bottom: 0.3rem;

    .radio-group {
      display: flex;
      align-items: center;

      &:first-child {
        margin-right: 1.25rem;
      }
    }

    .select {
      position: relative;
      background-color: red;

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0.375rem;
        height: 0.375rem;
        border-radius: 100px;
        background-color: #fff;
        transform: translate(-50%, -50%);
      }
    }

    .radio {
      width: 1rem;
      height: 1rem;
      border: 1px solid #ccc;
      border-radius: 10px;

      &radio:first-child {
        margin-right: 1.25rem;
      }
    }
  }

  .btn-group {
    margin-top: 2.1875rem;
    display: flex;
    justify-content: space-around;

    .van-button--small {
      height: 1.5625rem !important;
    }

    .van-button {
      width: 3.9375rem !important;
      border-radius: 1.25rem !important;
    }
  }

  .btn-group-pay {
    margin-top: 2.1875rem;
    display: flex;
    justify-content: space-around;

    .van-button--small {
      height: 2.25rem !important;
    }

    .van-button {
      width: 5rem !important;
      border-radius: 0.3125rem !important;
    }
  }

  .password-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 18rem;
    border-radius: 0.625rem;
    padding: 0.6rem 0.625rem;

    .title {
      position: relative;
      margin-bottom: 1.825rem;
    }

    .close {
      position: absolute;
      right: 0.625rem;
      top: 0;
      width: 1rem;
      height: 1rem;

      &::after {
        content: "";
        position: absolute;
        right: -12px;
        top: 6px;
        width: inherit;
        transform: rotate(45deg);
        height: inherit;
        border-left: 2px solid #000;
      }

      &::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 6px;
        width: inherit;
        height: inherit;
        border-top: 2px solid #000;
        transform: rotate(45deg);
      }
    }
  }

  .dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 17.75rem;
    border-radius: 0.625rem;
    padding: 0.6rem 0.625rem;

    .title {
      margin-bottom: 0.825rem;
    }
  }

  input {
    width: 100%;
    border-radius: 2px;
    border: 1px solid #ccc;
    margin-bottom: 0.4rem;
    padding: 5px;
    font-size: 0.9375rem;
  }

  .be_about_to {
    color: #101010 !important;
  }

  .start {
    color: #fff !important;
  }

  .flex {
    display: flex;
  }

  .align-center {
    align-items: center;
  }

  .yesterday_price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: rgba(242, 220, 220, 1);
    border-radius: 0.3125rem;
    margin-top: 0.375rem;
    margin-bottom: 0.75rem;
    padding-left: 0.6875rem;
    padding-right: 0.7188rem;
    font-size: 0.6875rem;

    .price {
      font-weight: bold;
      color: #f51d1d;
      font-size: 1.125rem;
    }
  }

  .nav {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    margin: 1rem 0.25rem;
    padding: 1.0938rem 1.2813rem 1.0938rem;
    border-radius: 0.625rem;
    font-size: 0.6875rem;
  }

  .nav-item {
    display: flex;
    flex-direction: column;
    font-weight: bold;

    img {
      width: 1.875rem;
    }
  }
}
</style>